<template>
  <div class="css-demo-container">
    <div class="header">
      <h1 class="title">CSS 系统讲解</h1>
      <p class="subtitle">深入理解CSS核心概念与实用技巧</p>
    </div>

    <div class="navigation">
      <div class="nav-grid">
        <div
          v-for="section in sections"
          :key="section.id"
          class="nav-card"
          @click="activeSection = section.id"
          :class="{ active: activeSection === section.id }"
        >
          <div class="nav-icon">{{ section.icon }}</div>
          <h3>{{ section.title }}</h3>
          <p>{{ section.description }}</p>
        </div>
      </div>
    </div>

    <div class="content">
      <component :is="currentComponent" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import SelectorDemo from './components/SelectorDemo.vue'
import PriorityDemo from './components/PriorityDemo.vue'
import DocumentFlowDemo from './components/DocumentFlowDemo.vue'
import ReflowRepaintDemo from './components/ReflowRepaintDemo.vue'
import PositioningDemo from './components/PositioningDemo.vue'
import LayoutDemo from './components/LayoutDemo.vue'
import AnimationDemo from './components/AnimationDemo.vue'
import SvgDemo from './components/SvgDemo.vue'
import LottieDemo from './components/LottieDemo.vue'
import VueStylesDemo from './components/VueStylesDemo.vue'
import ShowDemo from './components/ShowDemo.vue'

const activeSection = ref('selector')

// 组件映射
const components = {
  SelectorDemo,
  PriorityDemo,
  DocumentFlowDemo,
  ReflowRepaintDemo,
  PositioningDemo,
  LayoutDemo,
  AnimationDemo,
  SvgDemo,
  LottieDemo,
  VueStylesDemo,
  ShowDemo,
}

const sections = [
  {
    id: 'selector',
    title: '选择器',
    description: '各种CSS选择器的使用方法',
    icon: '🎯',
    component: 'SelectorDemo',
  },
  {
    id: 'priority',
    title: '样式优先级',
    description: 'CSS权重计算与优先级规则',
    icon: '⚖️',
    component: 'PriorityDemo',
  },
  {
    id: 'document-flow',
    title: '文档流与塌陷',
    description: '文档流原理与父级塌陷问题',
    icon: '📄',
    component: 'DocumentFlowDemo',
  },
  {
    id: 'reflow-repaint',
    title: '回流与重绘',
    description: 'DOM性能优化核心概念',
    icon: '🔄',
    component: 'ReflowRepaintDemo',
  },
  {
    id: 'positioning',
    title: '定位与层叠',
    description: '定位方式与层叠上下文',
    icon: '📐',
    component: 'PositioningDemo',
  },
  {
    id: 'layout',
    title: 'Flex与Grid',
    description: '现代CSS布局方案',
    icon: '📱',
    component: 'LayoutDemo',
  },
  {
    id: 'animation',
    title: 'Transition动画',
    description: 'CSS过渡动画实现',
    icon: '✨',
    component: 'AnimationDemo',
  },
  { id: 'svg', title: 'SVG矢量图', description: 'SVG基础与应用', icon: '🎨', component: 'SvgDemo' },
  {
    id: 'lottie',
    title: 'Lottie动画',
    description: 'Lottie动画集成与使用',
    icon: '🎬',
    component: 'LottieDemo',
  },
  {
    id: 'vue-styles',
    title: 'Vue样式',
    description: 'scoped与deep的使用',
    icon: '💚',
    component: 'VueStylesDemo',
  },
  {
    id: 'show',
    title: 'Show',
    description: 'Show的使用',
    icon: '🎉',
    component: 'ShowDemo',
  },
]

const currentComponent = computed(() => {
  const section = sections.find((s) => s.id === activeSection.value)
  const componentName = section?.component || 'SelectorDemo'
  return components[componentName as keyof typeof components]
})
</script>

<style scoped lang="scss">
.css-demo-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem;

  .header {
    text-align: center;
    margin-bottom: 3rem;
    color: white;

    .title {
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    .subtitle {
      font-size: 1.2rem;
      opacity: 0.9;
      font-weight: 300;
    }
  }

  .navigation {
    margin-bottom: 2rem;

    .nav-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1rem;
      max-width: 1400px;
      margin: 0 auto;
    }

    .nav-card {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 12px;
      padding: 1.5rem;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 2px solid transparent;
      backdrop-filter: blur(10px);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      }

      &.active {
        border-color: #667eea;
        background: rgba(102, 126, 234, 0.1);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
      }

      .nav-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
      }

      h3 {
        margin: 0 0 0.5rem 0;
        color: #333;
        font-weight: 600;
      }

      p {
        margin: 0;
        color: #666;
        font-size: 0.9rem;
        line-height: 1.4;
      }
    }
  }

  .content {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    min-height: 600px;
  }
}
</style>
